<template>
	<div class="exercises-volume-library" v-loading.fullscreen.lock="loading"
		element-loading-text="拼命加载中">
		

		<div class="question-bank-h-box">

			<ul class="question-bank-h-type">

				<li class="question-bank-h-list">
					<span>试题类型:</span>
					<div>
						<template>
						  <el-radio-group v-model="question.type" @change="getTestList">
						  	<template v-for="item of getTestTypeList">
						  		<el-radio :label="item.id">{{item.name}}</el-radio>
						  	</template>
						  </el-radio-group>
						</template>
					</div>
				</li>

				<li class="question-bank-h-list">
					<span>题目范围:</span>
					<div>
						<template>
						  <el-select clearable  v-model="question.grade" placeholder="请选择年级" @change="setRange($event, 'grade')"> 
						    <el-option
						      v-for="(item, index) in gradeLsit"
						      :key="index"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						  </el-select>
						</template>

						<template>
						  <el-select clearable  v-model="question.subject" placeholder="请选择科目" @change="setRange($event, 'subject')">
						    <el-option
						      v-for="(item, index) in subjectLsit"
						      :key="index"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						  </el-select>
						</template>

						<template>
						  <el-select clearable  v-model="question.edition" placeholder="请选择版本" @change="setRange($event, 'edition')">
						    <el-option
						      v-for="(item, index) in editionList"
						      :key="index"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						  </el-select>
						</template>

						<template v-if="0">
						  <el-select clearable  v-model="question.material" placeholder="请选择教材">
						    <el-option
						      v-for="(item, index) in materialList"
						      :key="index"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						  </el-select>
						</template>

						<el-button type="primary" @click="getSearch()">筛选</el-button>
					</div>
				</li>

			</ul>
		</div>	
		
		<div class="common-volume-library">
			
			<div class="question-bank-wp-r-h">
				<el-input
				    placeholder="搜索试卷"
				    suffix-icon="el-icon-search"
				    v-model="question.keyword" @change="getSearch2">
				  </el-input>

				  <div>
				  		<el-radio-group v-model="question.order" @change="getTestList">
					  		<el-radio label="time">最新<i class="el-icon-sort-down"></i></el-radio>
					  		<el-radio label="fav">热门<i class="el-icon-sort-down"></i></el-radio>
					  	</el-radio-group>

				  	  <el-checkbox v-model="question.myCollection" @change="getTestList">只显示我的收藏</el-checkbox>
				  </div>
			</div>

			<ul>
				<template  v-for="(item, index) of testList">
				<transition name="el-zoom-in-top">
				<li class="common-volume-ls my-common-volume" :key="index">
					<span></span>
					<div class="">
						<div class="common-volume-ls-title">
							<!-- <router-link  :to="{path: '/test/test-paper', query: {id: item.id, authority: 1}}">{{item.name}}</router-link> -->
							<a @click="previewTest(item)">{{item.name}}</a>
							<span>更新于：{{item.update_time.substring(0, 16)}}</span>
						</div>
						<div class="common-volume-ls-tag">
							<span v-if="item.study_section">{{item.study_section}}</span>
							<span v-if="item.subject">{{item.subject}}</span>
							<span v-if="item.source">{{item.source}}</span>
							<span v-if="item.version_name">{{item.version_name}}</span>
						</div>
						<div class="common-volume-ls-op">
							
							<template v-if="item.create_id != $g.user_id">
								<span v-if="item.is_fav == 0"   @click="operationTest(item.id, item.is_fav)">收藏试卷</span>
								<span v-else  @click="operationTest(item.id, item.is_fav)">取消收藏</span>
							</template>
							<span  @click="previewTest(item)">预览</span>
							<!-- <router-link :to="{path: '/test/test-paper', query: {id: item.id, authority: 1}}">预览</router-link> -->
						</div>
					</div>
				</li>
				</transition>
				</template>
			</ul>

			<div class="dependent" v-if="placeholder">
				<i class="ipng image_state01"></i>
				<p>还没发现任何相关的内容哦~</p>
			</div>


			<el-pagination class="test-pagination" v-show=" question.total > 10"
				@size-change="sizeChange"
				@current-change="currentChange"
				:current-page="question.page"
				:page-sizes="[10, 50, 100, 200, 300, 400]"
				:page-size="question.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="question.total">
			</el-pagination>

		</div>

	</div>
</template>
<script>
	
	export default {
		data(){
			return {
				question: {
					type: 0, 		/*试题类型*/
					grade: '', 		/*年级id*/
					subject: '',    /*科目id*/
					edition: '', 	/*版本id*/
					material: '',	/*教材*/
					order: 'time',			/*列表排序*/
					keyword: '', 			/*搜索关键字*/
					myCollection: false,
					page: 1,
					size: 10,
					total: 0
				},
				placeholder: false,
				loading: true,
				gradeLsit: [], 		/*年级列表*/
				subjectLsit: [], 	/*科目列表*/
				editionList: [], 	/*版本列表*/
				materialList: [],	/*教材*/
				testList: [], 		/*试卷列表*/
				getTestTypeList: [],

				// 题目范围 ：请求地址 - 区分多级/单级
				gradeUrl: ['api/org/org', 'api/newlevel/platform_org'],
				subjectUrl: ['api/cate/subject', 'api/newlevel/platform_subject'],
				editionUrl: ['api/cate/version', 'api/cate/version'],
				materialUrl: ['api/cate/material', 'api/newlevel/platform_material'],				
			}
		},
		created(){
			this.getGrade()
			this.getTestType()
			this.getTestList()
		},
		computed: {
			CheckSchoolAppCode() {
				let code = sessionStorage.getItem('CheckSchoolAppCode');
				return code ? code : '00000000000000000000000000000000';
			},
			inx() {
				return this.$store.getters.isMulti ? 1 : 0;
			},
			gradeParams() {
				return [
					{
						level: 3,
						direction: 'balance'
					},
					{
						level: 3,
						direction: 'balance',
						status: 1,
						app_code: this.CheckSchoolAppCode
					}
				];
			},
			subjectParams() {
				return [
					{
						type: 2,
						org_id: this.question.grade,
						status: 1
					},
					{
						type: 2,
						org_id: this.question.grade,
						status: 1,
						app_code: this.CheckSchoolAppCode
					}
				];
			},
			editionParams() {
				return [
					{
						type: 2,
						org_id: this.question.grade,
						sub_id: this.question.subject,
						status: 1
					},
					{
						type: 2,
						org_id: this.question.grade,
						sub_id: this.question.subject,
						status: 1
					}
				];
			},
			materialParams() {
				return [
					{
						org_id: this.question.grade,
						sub_id: this.question.subject,
						ver_id: this.question.edition,
						status: 1
					},
					{
						org_id: this.question.grade,
						sub_id: this.question.subject,
						ver_id: this.question.edition,
						status: 1,
						app_code: this.CheckSchoolAppCode
					}
				];
			}
		},		
		methods: {
			/**
			 * 预览试卷
			 * @DateTime 2019-08-28T16:39:26+0800
			 * @return   {[type]}                 [description]
			 */
			previewTest(obj){
				let success = (res=>{
					// yes 代表有 no代表没
					if (res.data == 'no') {
						this.$router.push({path: '/exercises/test-preview', query: {id: obj.id}})
					}else if (res.data == 'yes') {
						this.$router.push({path: '/exercises/library-result', query: {id: obj.id}})
					}else{
						this.$message.error(res.msg)
					}

				});
				let params = {userid: this.$g.user_id,test_id: obj.id};

				this.$ajax({
					url: 'api/newtest/check_user_test_library',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},

			/**
			 * 请求试题类型数据
			 * @DateTime 2019-07-25T14:09:13+0800
			 * @return   {[type]}                 [description]
			 */
			getTestType(){

				let success = (res=>{
					this.getTestTypeList = res.data;
					if (this.getTestTypeList.length > 0) {
						this.getTestTypeList.unshift({id:0, name: '全部'})
					}
				});

				let params = {status: 1};

				this.$ajax({
					url: 'api/newtest/get_test_type',
					method: 'get',
					params: params,
					func: { success: success}
				})
			},
			getSearch(){
				this.question.page = 1
				this.getTestList()
			},	
			getSearch2(){

				// if (this.question.keyword == '') {return}

				this.question.page = 1
				this.getTestList()
			},
			/**
			 * 请求试卷列表
			 * @DateTime 2019-07-22T13:47:02+0800
			 */
			getTestList(){

				// if (this.question.keyword != '' || this.question.grade != '') {
				// 	this.question.page = 1
				// }


				let success = ( res=>{
					this.testList = res.data.data;
					this.question.page = parseInt(res.data.page_index);
					this.question.total  = parseInt(res.data.data_sum);
					this.loading = false;
					this.testList.length != 0 ? this.placeholder = false : this.placeholder = true;
				});

				let myCollection = 0
				if (this.question.myCollection == true) {
					myCollection = 1
				}else{
					myCollection = 0
				}

				let params = {
					// user_id: this.$g.user_id,
					page_index: this.question.page,
					page_size: this.question.size,
					grade_id: this.question.grade,
					subject_id: this.question.subject,
					version_id:	this.question.edition,
					// masterial_id: this.question.material,
					my_fav: myCollection,
					keyword: this.question.keyword ? this.question.keyword : this.$route.query.keyword,
					order: this.question.order,
					source_id: this.question.type,
					authority:  1
				};

				this.$ajax({
					url: 'api/newtest/test_list',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/**
			 * 请求年级列表数据
			 * @DateTime 2019-07-22T14:45:06+0800
			 */
			getGrade(){
				let success = (res=>{
					this.gradeLsit = res.data;
				});
				this.$ajax({
					url: this.gradeUrl[this.inx],
					method: 'get',
					params: this.gradeParams[this.inx],
					func: { success: success}
				})
			},
			/**
			 * 请求科目数据
			 * @DateTime 2019-07-22T14:53:30+0800
			 */
			getSubject(){
				let success = (res=>{
					this.subjectLsit = res.data
				});

				this.$ajax({
					url: this.subjectUrl[this.inx],
					method: 'get',
					params: this.subjectParams[this.inx],
					func: {success: success}
				})
			},
			/**
			 * 请求科目版本
			 * @DateTime 2019-07-22T15:30:28+0800
			 */
			getEdition(){
				let success = (res=>{
					this.editionList = res.data;
				});

				this.$ajax({
					url: this.editionUrl[this.inx],
					method: 'get',
					params: this.editionParams[this.inx],
					func: { success: success }
				});
			},
			/**
			 * 请求教材列表数据
			 * @DateTime 2019-07-22T15:39:04+0800
			 * @return   {[type]}                 [description]
			 */
			getMaterial(){
				let success = (res=>{
					this.materialList = res.data;
				});

				this.$ajax({
					url: this.materialUrl[this.inx],
					method: 'get',
					params: this.materialParams[this.inx],
					func: { success: success }
				});
			},
			/**
			 * 改变题目范围
			 * @param {String} type
			 * 根据改变当前参数重置相关数据
			 */
			setRange(val, type){

				switch( type ){
					case 'grade': /*年级*/

					if (this.question.grade == '') {

						this.question.subject = '';
						this.question.edition = '';
						this.question.material = '';

						this.subjectLsit = [];
						this.editionList = [];
						this.materialList = [];

						this.getTestList();

					}else{
						this.question.subject = '';
						this.question.edition = '';
						this.question.material = '';

						this.subjectLsit = [];
						this.editionList = [];
						this.materialList = [];

						this.getSubject();
					}

						
					break;
					case 'subject': /*科目*/
						this.question.edition = '';
						this.question.material = '';

						this.editionList = [];
						this.materialList = [];
						this.getEdition();
					break;
					case 'edition': /*版本*/
						// this.question.material = '';
						// this.materialList = [];
						// this.getMaterial();
					break;
				}
			},
			sizeChange(val) {
				// this.question.page = val
				this.question.size = val
				this.getTestList()
			},
			currentChange(val) {
				this.question.page = val
				this.getTestList()
			},
			/**
			 * 收藏试卷
			 * @DateTime 2019-08-19T15:33:09+0800
			 * @param    {[type]}                 id [description]
			 * @return   {[type]}                    [description]
			 */
			operationTest(id, type){
				this.$confirm('是否添加到我的卷库？', '提示', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning',
					customClass: "test-message"
				}).then(() => {


					let success = (res=>{
						this.$message.success(res.msg)
						this.getTestList()
					});

					let params = {id: id};

					if (type == 0) {
						this.$ajax.post('api/newtest/fav_test', params, {func: {success: success}})
					}else{
						this.$ajax.delete('api/newtest/fav_test', {params, func: {success: success}})
					}

					
				}).catch(() => {});
			},
			
		}

	}
</script>